<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>echart_dataset实例</title>
    {% include 'common/echart_base.html' %}
    <script type="text/javascript">
        $(document).ready(function () {
            option = {
                legend: {},
                tooltip: {},
                toolbox:{
                    show:true,
                    feature:{
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        //图片下载名称
                        saveAsImage: {name:'dataset实例'},
                    }
                },
                backgroundColor:'rgba(0,100,150,0.5)',
                title:{
                    text:'dataset实例',
                    textStyle:{
                        color: 'rgba(200,0,200,0.5)',
                        fontSize: 20,
                        fontFamily:'微软雅黑',
                        fontWeight:'bold',
                    }
                },
                dataset: {
                    // 提供一份数据。
                    source: [
                        ['product', '2015', '2016', '2017'],
                        ['Matcha Latte', 43.3, 85.8, 93.7],
                        ['Milk Tea', 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 72.4, 53.9, 39.1]
                    ]
                },
                // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                xAxis: {type: 'category'},
                // 声明一个 Y 轴，数值轴。
                yAxis: {},
                // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };

            option0 = {
                dataset: {
                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        {product: 'Matcha Latte', '2015': 10.3, '2016': 85.8, '2017': 93.7},
                        {product: 'Milk Tea', '2015': 30.1, '2016': 73.4, '2017': 55.1},
                        {product: 'Cheese Cocoa', '2015': 50.4, '2016': 65.2, '2017': 82.5},
                        {product: 'Walnut Brownie', '2015': 80.4, '2016': 53.9, '2017': 39.1}
                    ]
                },
            };

            //dataset数据自定义映射
            option1 = {
                legend: {
                    //type:'scroll',
                    //width:'80%',
                    //left:0,
                    top:'7%'
                },
                tooltip: {},
                backgroundColor:'rgba(255,0,100,0.6)',
                toolbox:{
                    show:true,
                    left:'center',
                    feature: {
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        saveAsImage: {name:'dataset实例'}
                    }
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                    ]
                },
                xAxis: [
                    {type: 'category', gridIndex: 0},
                    {type: 'category', gridIndex: 1}
                ],
                yAxis: [
                    {gridIndex: 0},
                    {gridIndex: 1}
                ],
                //定义grid（绘图窗格）
                grid: [
                    {bottom: '55%'},
                    {top: '55%'}
                ],
                series: [
                    // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                    {type: 'bar', seriesLayoutBy: 'row'},
                    {type: 'bar', seriesLayoutBy: 'row'},
                    {type: 'bar', seriesLayoutBy: 'row'},
                    // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
                ]
            };
            /*
            当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。
            反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。
            */

            //使用encode时需要手动设置每个series的name和legend，tooltip
            var option2 = {
                legend:{itemWidth:30,icon:'roundRect',orient:'vertical'},
                //开启tooltip显示
                tooltip:{width:30,textStyle:{color:'yellow'}},
                backgroundColor:'#eedeb0',
                dataset: {
                    dimensions:['score', 'amount', 'product','price'],
                    source: [
                        {product: 'Matcha Latte', count: 823, score: 95.8,price:50},
                        {product: 'Milk Tea', count: 235, score: 81.4,price:56},
                        {product: 'Cheese Cocoa', count: 1042, score: 91.2,price:45},
                        {product: 'Walnut Brownie', count: 988, score: 76.9,price:60}
                    ]
                },
                xAxis: {name:['score','price']},
                yAxis: {type: 'category',name:'product'},
                grid:{
                    left: '15%',
                },
                series: [
                    {
                        name:'price',
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            tooltip:['price'],
                            //seriesName: [0, 1],
                            x: ['price'],
                            // 将 "product" 列映射到 Y 轴。
                            y: 'product'
                        }
                    },
                    {
                        name:'score',
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            tooltip:['score'],
                            //seriesName: [0, 1],
                            x: ['score'],
                            // 将 "product" 列映射到 Y 轴。
                            y: 'product'
                        }
                    }
                ]
            };

            echartinstance=echarts.init(document.getElementById('echart_dataset'),'light');
            echartinstance.setOption(option);

            setTimeout(function (e) {
                console.log('开始变换');
                echartinstance.setOption(option0);
            },2000);

            echartinstance1=echarts.init(document.getElementById('echart_dataset1'));
            echartinstance1.setOption(option1);
            echartinstance1=echarts.init(document.getElementById('echart_dataset2'));
            echartinstance1.setOption(option2);

        })
    </script>
</head>
<body>
<center>
    <div >
        <div id="echart_dataset" style="width:700px;height: 400px;display: inline-block;"></div>
        <div id="echart_dataset1" style="width:700px;height: 400px;display: inline-block;"></div>
        <div id="echart_dataset2" style="width:700px;height: 400px;display: inline-block;"></div>
    </div>
</center>
</body>
</html>